<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head  th:fragment="header">
    <meta charset="utf-8">
    <title>登录页面</title>
    <script src="../static/js/jquery-3.2.1.min.js" th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <script src="../static/js/semantic.js" th:src="@{/js/semantic.js}"></script>
    <link rel="stylesheet" href="../static/css/semantic.css" th:href="@{/css/semantic.css}" />
    <link rel="stylesheet" href="../static/css/icon.css" th:href="@{/css/icon.css}" />
    <style type="text/css">
        body {
            background-color: #DADADA;
        }
        body > .grid {
            height: 100%;
        }
        .image {
            margin-top: -100px;
        }
        .column {
            max-width: 450px;
        }
        .ui.header > .image:not(.icon), .ui.header > img {
            width: 9em;
        }
    </style>
</head>

<body>
    <div class="ui center aligned middle aligned grid">
        <div class="column">
            <h2 class="ui teal image header">
                <img src="../static/images/logo.png" th:src="@{/images/logo.png}" class="image">
                <div class="content">
                    登录到账号
                </div>
            </h2>
            <form class="ui large form" th:classappend="${#fields.hasErrors('password')} ? error : '' " id="form" th:action="@{/login/auth}" th:object="${loginFormQuery}" method="post" onSubmit="return check();">
                <div class="ui stacked segment">
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" name="username" th:field="*{username}" placeholder="请输入您的账号" >
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="lock icon"></i>
                            <input type="password" name="password" placeholder="密码" >
                        </div>
                    </div>
                    <div class="ui fluid large teal submit button">登录</div>
                </div>

                <div class="ui error message">
                    <ul class="list">
                        <li th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></li>
                    </ul>
                </div>

                <div class="ui message">
                    <div class="ui slider checkbox " >
                        <label>记住帐号？</label>
                        <input type="checkbox"  name="rememberMe" th:field ="*{rememberMe}" />
                    </div>
                </div>
            </form>


        </div>
    </div>
    <script>
        //登录提交验证
        function check() {

        }
        //登录验证
        $(document)
            .ready(function() {
                $('.ui.form')
                    .form({
                        fields: {
                            email: {
                                identifier  : 'username',
                                rules: [
                                    {
                                        type   : 'empty',
                                        prompt : '账号不能为空'
                                    },
                                ]
                            },
                            password: {
                                identifier  : 'password',
                                rules: [
                                    {
                                        type   : 'empty',
                                        prompt : '密码不能为空'
                                    },
                                ]
                            }
                        }/*,
                        {
                            onSuccess: function(){
                                alert("成功了啊");
                            }
                        }*/
                    })
                ;
            })
        ;

        $('.ui.form').submit(function(e){
            return true;
        });
        //复选框初始化
        $('.ui.checkbox')
            .checkbox()
        ;
    </script>

</body>

</html>